<template>
  <!--  最外层div色设置高度无效，但可以设置宽度，排除变量尝试的-->
  <div class="detail-container">
    <div style="width: 100%;height: 88vh">
      <div class="titlePart"> <!--名称部分-->
        <div style="height: 12px;width: 100%"></div> <!--用来隔离-->
        <div style="display: flex">
          <div style="background-color:rgb(245,183,12);width: 3px;height:22px;margin-top: 1px"></div>
          <span style="padding-left:12px;letter-spacing:5px; background-image:-webkit-linear-gradient(bottom,#2451d6,#234875,#2ba4ca);
             -webkit-background-clip:text;  -webkit-text-fill-color:transparent; font-size: 20px ">
            <strong>{{ sydwName }}</strong>
          </span>
        </div>
      </div>
      <div class="echarts">
        <el-row style="height: 100%;width: 100%">
           <el-col :span="6" style="height: 100%">
             <div style="height: 100%;width: 100%;">
                <div id="areaDistribute" style="height:100%;width:100%;"></div><!--当高度变成95,就又变味了（图形缩小了）-->
             </div>
           </el-col>
           <el-col :span="6" style="height: 100%">
             <div style="height: 100%;width: 100%;">
               <div id="usedTime" style="width: 100%;height:100%;"></div>
             </div>
           </el-col>
           <el-col :span="6" style="height: 100%">
             <div style="height: 100%;width: 100%;">
               <div id="topDevStatistics" style="width: 100%;height:100%;"></div>
             </div>
           </el-col>
           <el-col :span="6" style="height: 100%">
             <div style="height: 100%;width: 100%;">
               <div id="nominalVolStatistics" style="width: 100%;height:100%;"></div>
             </div>
           </el-col>
        </el-row>
      </div>
      <div class="table">
          <el-table :data="serverUnitTable" style="width: 100%; /*height:250px*/" size="mini" @expand-change="setTankInfoTable"
                    :cell-style="unitCellStyle" :header-cell-style="{background: '#DAE3F3',fontSize:'12px',width: '100%',color:'#4472C4'}" >
            <el-table-column label="序号" prop="id" type="expand" width="50">
              <template slot-scope="scope">
                <el-table :data="tankInfoTable" :row-key="getRowKeys"  style="width: 100%;" stripe :cell-style="unitDetailcellStyle" :header-cell-style="{ background: '#2F5597', color:'white',fontSize:'12px'}" >
                  <el-table-column label="序号" prop="id" width="50"></el-table-column>
                  <el-table-column label="设备编号" prop="f003" width="120"></el-table-column>
                  <el-table-column label="容积（m3）" prop="f006" width="120"></el-table-column>
                  <el-table-column label="最近检验日期" prop="f025" width="150"></el-table-column>
                  <el-table-column label="下次检验日期" prop="nextCheckDate" width="150"></el-table-column>
                  <el-table-column label="检验报告" prop="f035" width="120"></el-table-column>
                  <el-table-column label="建议" prop="f034"></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="所在单位" prop="sydw"></el-table-column>
            <el-table-column label="设备总量" prop="tankCount"></el-table-column>
            <el-table-column label="100000m3及以上" prop="hunThoundsCumec"></el-table-column>
            <el-table-column label="[10000,100000)m3" prop="tenThoundsCumec"></el-table-column>
            <el-table-column label="[1000,10000)m3" prop="thoundsCumec"></el-table-column>
            <el-table-column label="1000m3以下" prop="lessThoundCumec"></el-table-column>
          </el-table>
        <div class="sumCount">
          <el-table :data="sumCount" style="width: 100%; ":cell-style="sumCellStyle" :show-header="false" v-show="sumCountShow" size="mini">
            <el-table-column label="序号" prop="id" width="100"> </el-table-column>
            <el-table-column label="使用单位" prop="sydwCount"></el-table-column>
            <el-table-column label="储罐总量" prop="tankCount"></el-table-column>
            <el-table-column label="100000m3及以上" prop="hunThoundsCumec"></el-table-column>
            <el-table-column label="[10000,100000)m3" prop="tenThoundsCumec"></el-table-column>
            <el-table-column label="[1000,10000)m3" prop="thoundsCumec"></el-table-column>
            <el-table-column label="1000m3以下" prop="lessThoundCumec"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MakeComListSearchArgs, searchMakeComList, serachlist } from '../../../../../api/chuguan/data-service'
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'

export default {
  name: "UnitDetail",
  components: {},
  props: {
    sydwName: {
      type: String,
      default: ''
    },
    sydeCount:{
      type: Number,
      default:1
    }
  },
  data() {
    return {
      MakeComListSearchArgs: new MakeComListSearchArgs(),
      serverUnitTable:[
      /*  {
          id:1,
          sydw:'中化南通石化储运有限公司',
          tankCount:4,             //储罐总量
          hunThoundsCumec:4,       //十万立方以上
          tenThoundsCumec:0,       //一万到十万立方
          thoundsCumec:0,          //一千到10000立方
          lessThoundCumec:0        //小于1000立方
        },*/
      ],
      tankInfoTable:[
       /* {
          id:'1',
          devId:"T-42",         //设备编号,
          cumec:1000,           //容积
          recentCheckDate:'2018-10-20',      //最近检验日期
          nextCheckDate:'2024-08-14',      //最近检验日期
          checkReport:"2份",
          advice:"1. 修复检查、检测中发现的缺陷后重新投入使用；2. " +
            "根据SY/T6620-2014《油罐的检验、修理、改建及翻建》和SY/T5921-2011《立式圆筒形钢制焊接油罐操作维护修理规程》的相关规定，建议该罐在修复缺陷后的检验周期不超过6年",
        },*/
      ],
      /**
       *   图表相关数据-01.储罐地域分布图
       **/
      areaDistribute: {
        option: {
          color: ['#3177c2'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '储罐地域分布',
            textStyle: {
              fontSize: 15,
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {
          },
          legend: {},
          xAxis: {
            data: ["山东省", "安徽省"]
          },
          yAxis: {
            minInterval: 1,
            type: 'value',   //刻度自适应
            scale: true,
            name: '单位：台',
          },
          series: [{
            //name: '台',
            barWidth: '30%',
            type: 'bar',
            data: [2, 20],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        },
      },
      dataTable:[],
      /**
       *   图表相关数据-02.储罐投入使用年份
       **/
      usedTime: {
        option: {
          color: ['#3177c2'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '储罐投入使用年份',
            textStyle: {
              fontSize: 15,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {},
          legend: {},
          xAxis: {
            axisLabel: {//文字倾斜
              interval: 0,
              rotate: 90
            },
            data: ["2007年", "2008年", "2009年", "2010年", "2011年", "2012年", "2013年", "2018年", "2019年"]
          },
          yAxis: {
            type: 'value',
            //scale: true,
            name: '单位：台',
            minInterval: 1,
            boundaryGap: [0, 0.1],
          },
          series: [{
            barWidth: '30%',
            type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [6, 1, 1, 2, 1, 1, 1, 7, 1],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        }

      },
      /**
       * 图表相关数据-03 储罐灌顶类型统计图
       */
      topDev: {
        option: {
          color: ['#d0961f', '#f3cd0e'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '储罐灌顶类型统计图',
            textStyle: {
              fontSize: 15,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom',
            left: 'center',
          },
          series: [{
            radius: '80%',
            type: 'pie',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [
              {value: 17, name: '内浮顶'},
              {value: 14, name: '拱顶'},
            ],
            label: {  //图上方显示值
              normal: {
                show: true,
                // formatter: '{c},({d}%)',   //c：值，b:名字，d:百分比
                //修改饼状图百分比位数
                formatter:function(data){
                  return data.value+',\n'+data.percent.toFixed(0)+"%"; //取小数点后0位
                },
                position:'inside'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      },
      /**
       * 图表相关数据04 储罐公称容积统计图
       */
      nominalVol: {
        option: {
          color: ['#20507a', '#e96d11', '#a29b9b', '#f5dd08',  //从右到左分配颜色
            '#0f7ed2', '#4f8611'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '储罐公称容积统计图',
            textStyle: {
              fontSize: 18,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            top: 'center',
            right: '5',
          },
          series: [{
            radius: '50%',
            type: 'pie',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [
              {value: 14, name: '10000m3'},//对应病状图中的右到左
              {value: 2, name: '5000m3'},
              {value: 3, name: '3600m3'},
              {value: 4, name: '2400m3'},
              {value: 6, name: '2000m3'},
              {value: 2, name: '1000m3'},
            ],
            label: {  //图上方显示值
              normal: {
                show: true,
                formatter: '{c}',
                position:'inside'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      },
      sumCount:[
       {
         id:"汇总",
         sydwCount:0,
         tankCount:0,
         hunThoundsCumec:0,
         tenThoundsCumec:0,
         thoundsCumec:0,
         lessThoundCumec:0
      }],
      sumCountShow:false
    }
  },
  created() {

  },
  mounted() {
    setTimeout(console.log("等待500m秒，让图形先渲染"),500)
    this.getAllData()
    /**
     *    设置一个延迟，因为JSs执行太快，CSS来不及渲染，导致canvas只有默认的宽度，外层容器隐藏时，图像会找不到，将v-show换成v-if
     */
  },
  methods: {
    getRowKeys(row) {
      return row.id
    },
    setTankInfoTable:function(row,expandedRows){
      this.tankInfoTable=[]
      if(expandedRows.length>0) {//展开时执行
        this.expands = []
        this.expands.push(row.id)
        for (let m = 0; m < this.dataTable.length; m++) {
          if (this.dataTable[m].f001 == row.sydw) {
            this.tankInfoTable.push(this.dataTable[m])
          }
        }
        console.log("tankInfoTable:"+this.tankInfoTable)
      }
    },
    getAllData:async function() {
      this.MakeComListSearchArgs.pageSize = 146
      const res = await searchMakeComList(this.MakeComListSearchArgs); //这里发出了一步请求，导致数据渲染的时候，moutedm
      const _list = res.data.data;
      let list=[]
      for(let i=0;i<_list.length;i++){
        if(_list[i].f021==this.sydwName){
          list.push(_list[i])
        }
      }
      for(let i=0;i<list.length;i++) {
        //数据处理部分
        console.log(list[i].f024)
        list[i].f006=list[i].f006.replace(/\s+/g,"")  //去出空格
        let prevalue=list[i].f006
        if(prevalue.length<2) {
          list[i].f006 = "0m3"
        }
        list[i].f006=list[i].f006.slice(0,list[i].f006.length-2)
        if(list[i].f024.length>3){
          list[i].f024=list[i].f024.slice(0,4)
        }
        list[i].f004 = list[i].f004.replace(/\s+/g, "")
        if (list[i].f004 == '拱顶罐') {
          list[i].f004 = '拱顶'
        }
        if (list[i].f004 == '/') {
          list[i].f004 = '未知'
        }
     }
      this.dataTable=list
      this.areaDistributeShow();
      this.usedTimeShow();
      this.topDevStatisticsShow();
      this.nominalVolStatisticsShow();
      this.setServerUnitTable()
    },

    setServerUnitTable:function(){
      let _sydw=[]
      for(let z=0;z<this.dataTable.length;z++){
        _sydw.push(this.dataTable[z].f001)
      }
      //去除使用单位中的重复值
      var sydw=[]
      for(let i in _sydw){
        if(sydw.indexOf(_sydw[i])==-1){
          sydw.push(_sydw[i])
        }
      }
      let list=[]
      let id=0
      for(let m=0 ;m<sydw.length;m++) {
        let tankCount = 0
        let lessThoundCumec = 0
        let thoundsCumec = 0
        let tenThoundsCumec = 0
        let hunThoundsCumec = 0
        for (let n = 0; n < this.dataTable.length; n++) {//当数组是json数据时，不适以let in遍历
          if (sydw[m] == this.dataTable[n].f001) {
            tankCount += 1
            let dataValue = parseInt(this.dataTable[n].f006)
            if (dataValue < 1000) {
              lessThoundCumec += 1;
            } else if (dataValue >= 1000 && dataValue < 10000) {
              thoundsCumec += 1
            } else if (dataValue >= 10000 && dataValue < 100000) {
              tenThoundsCumec += 1
            } else if (dataValue >= 100000) {
              hunThoundsCumec += 1
            }
          }
        }
        id += 1
        let list_ = {
          "id": id,
          "sydw": sydw[m],
          "tankCount": tankCount,
          "hunThoundsCumec": hunThoundsCumec,
          "thoundsCumec": thoundsCumec,
          "tenThoundsCumec": tenThoundsCumec,
          "lessThoundCumec": lessThoundCumec,
        }
        list.push(list_)
        this.serverUnitTable=list
      }
      this.setSumCount()
    },
    /**
     * 储罐地域分布显示
     */
    areaDistributeShow: function () {
      //备注，因为接口数据中没有任何地址信息，所以，这里我全部设为未知了
      let areaName=["未知",]
      let areaNameCount=[this.sydeCount]
      this.areaDistribute.option.xAxis.data=areaName
      this.areaDistribute.option.series[0].data=areaNameCount
      var chartDom = document.getElementById('areaDistribute');
      var myChart = echarts.init(chartDom);
      var option = this.areaDistribute.option
      myChart.setOption(option);
    },

    /**
     * 储罐投入使用年份
     */
    usedTimeShow: function () {
      let years=["未知"]
      let yearsCount=[1,]
      if(this.dataTable.length<1){
         this.usedTime.option.xAxis.data=years
         this.usedTime.option.series[0].data=yearsCount
      }else {
        years=[]
        yearsCount=[]
        for(let i=0;i<this.dataTable.length;i++){
          if(years.indexOf(this.dataTable[i].f024)==-1){
            years.push(this.dataTable[i].f024)
          }
        }
        for(let m=0;m<years.length;m++){
          let count=0
          for (let n=0;n<this.dataTable.length;n++){
            if(years[m]==this.dataTable[n].f024){
              count++
            }
          }
          yearsCount.push(count)
       }
         console.log("years:"+years+" "+" conunt:"+yearsCount)
      }
      this.usedTime.option.xAxis.data=years
      this.usedTime.option.series[0].data=yearsCount
      var chartDom1 = document.getElementById('usedTime');
      var myChart2 = echarts.init(chartDom1);
      var option2 = this.usedTime.option
      myChart2.setOption(option2);

    } ,

    /**
     * 储罐灌顶类型统计图
     */
    topDevStatisticsShow: function () {
      let topDev=[]
      for(let i=0;i<this.dataTable.length;i++){
        if(topDev.indexOf(this.dataTable[i].f004)==-1){
          topDev.push(this.dataTable[i].f004)
        }
      }
      let topNum = new Array(topDev.length).fill(0);
      for(let n in topDev){
        for(let m=0 ;m< this.dataTable.length;m++){
          if(this.dataTable[m].f004==topDev[n]){
            topNum[n]++
          }
        }
      }
      let objs=[]
      for(let n in topDev){
        objs.push({value:topNum[n],name:topDev[n]})
      }
      this.topDev.option.series[0].data=objs
      let chartDom1 = document.getElementById('topDevStatistics');
      let myChart2 = echarts.init(chartDom1);
      let option2 = this.topDev.option
      myChart2.setOption(option2);
    } ,

    /**
     * 储罐公称容积统计图
     */
    nominalVolStatisticsShow: function () {
      let cubCount=[]
      for(let i=0;i<this.dataTable.length;i++){
        if(cubCount.indexOf(this.dataTable[i].f006)==-1){
          cubCount.push(this.dataTable[i].f006)
        }
      }
      let cubCountNum= new Array(cubCount.length).fill(0);
      for(let n in cubCount){
        for(let m =0;m<this.dataTable.length;m++){
          if(this.dataTable[m].f006==cubCount[n]){
            cubCountNum[n]++
          }
        }
      }
      let objs=[]
      for(let n in cubCount){
        objs.push({value:cubCountNum[n],name:cubCount[n]})
      }
      console.log(JSON.stringify(objs))
      this.nominalVol.option.series[0].data=objs
      let chartDom1 = document.getElementById('nominalVolStatistics');
      let myChart2 = echarts.init(chartDom1);
      let option2 = this.nominalVol.option
      myChart2.setOption(option2);
    },

    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.args.num = pageSize
      this.args.offset = 0
      this.searchData()
    },
    // 页数改变
    async pageChange(page) {
      this.args.offset = (page - 1) * this.args.num
      this.currentPage = page
      this.searchData()
    },

    unitCellStyle:function ({row,column,rowIndex,columnIndex}){
      if (columnIndex==2||columnIndex==3){
        return "color:red"
      }
      return "fontWeight:blod"
    },
    //单元格背景颜色设设置：
    unitDetailcellStyle:function ({row,column,rowIndex,columnIndex}){ //不会直接返回,一个个执行完
      if (columnIndex=='1'||columnIndex=='0'){
        return 'color:black;backgroundColor:#2F5597';
      }
      if (columnIndex=='2'){
        return 'color:red;backgroundColor:#2F5597';
      }
      if (columnIndex=='3'||columnIndex=='4'){
        return 'color:yellow;backgroundColor:#2F5597';
      }
      if (columnIndex=='5'){
        return 'color:black;backgroundColor:#2F5597';
      }
      if (columnIndex=='6'){
        return 'color:white;fontWeight:bold;backgroundColor:#2F5597'
      }
      return 'backgroundColor:#2F5597;'
    },
    sumCellStyle:function ({row,colume,rowIndex,columnIndex}){
      if(columnIndex==0||columnIndex==1||columnIndex==2||columnIndex==3){
        return "color:red;fontWeight:bold"
      }
    },
    setSumCount:function (){
      console.log("serverUnitTable:"+JSON.stringify(this.serverUnitTable))
      for(let i=0;i<this.serverUnitTable.length;i++){
        this.sumCount[0].sydwCount+=1
        this.sumCount[0].tankCount+=this.serverUnitTable[i].tankCount
        this.sumCount[0].hunThoundsCumec+=this.serverUnitTable[i].hunThoundsCumec
        this.sumCount[0].tenThoundsCumec+=this.serverUnitTable[i].tenThoundsCumec
        this.sumCount[0].lessThoundCumec+=this.serverUnitTable[i].lessThoundCumec
      }
     this.sumCountShow=true
    }
  }
}
</script>

<style lang="less" scoped>

.detail-container {
  width: 100%;
  .titlePart {
    height: 5%;
  }
  .echarts {
    width: 100%;
    height: 40%;
  }
  .table {
    width: 100%;
    height: 52%;
    overflow-y: auto;
    .sumCount {
      //float: right;
      height: 8%;
      width: 100%;
    }
  }

}
</style>
